<script setup>
import { ref, reactive, watch, unref } from "vue";
import useCatesStore from "@/store/catesStore";
import { ElMessageBox, ElMessage } from "element-plus";
import { addCategory, editCategory, getClassif } from "@/api/catesApi";

const catesStore = useCatesStore();
const editId = ref("");
const dialogImageUrl = ref("");
const imgDialogVisible = ref(false);
const fileList = reactive({
  list: [],
});
const cateForm = reactive({
  parent_id: "",
  name: "",
  img: "",
  state: 1,
  selectArr: [],
});
const rules = reactive({
  parent_id: { required: true, message: "请选择上级分类", trigger: "blur" },
  name: { required: true, message: "请输入分类名称", trigger: "blur" },
  img: { required: true, message: "请选择封面图片", trigger: "blur" },
  state: { required: true, message: "请选择分类状态", trigger: "blur" },
});
const formRef = ref(null);
const getClass = async () => {
  const res = await getClassif();
  cateForm.selectArr = res.msg;
  console.log(res.msg);
};
getClass();
watch(
  () => cateForm.parent_id,
  (parent_id) => {
    if (parent_id === 0) {
      // 用户选择一级分类时，清空封面图片
      cateForm.img = "";
    }
  }
);

// 点击文件列表中已上传的文件
function handlePictureCardPreview(file) {
  // console.log(file,'点击文件')
  dialogImageUrl.value = file.url;
  imgDialogVisible.value = true;
}
// 文件状态改变时
function changeFile(file) {
  // console.log(file,'文件状态改变了')
  // 设置表单封面
  cateForm.img = file.raw;
}
// 超出限制
function limitTips() {
  ElMessage({
    type: "warning",
    message: "分类封面图片最多只允许上传一张",
  });
}

// 重置表单
const resetForm = () => {
  editId.value = "";
  fileList.list = [];
  // let form = unref(formRef)
  // form.resetFields()
  cateForm.img = "";
  cateForm.name = "";
  cateForm.parent_id = 0;
  cateForm.state = 1;
  // 关闭对话框
  catesStore.closeDialog();
};
// 提交表单
const submitForm = () => {
  // console.log(cateForm,'cateForm------')
  let form = unref(formRef);
  form.validate(async (valid) => {
    if (valid) {
      // console.log('submit!')
      if (editId.value) {
        // 编辑
        // console.log(editId,'编辑-----')
        const res = await editCategory(cateForm);
        if (res.code == 1) {
          ElMessage({
            type: "success",
            message: res.msg,
          });
        } else {
          ElMessage({
            type: "warning",
            message: res.msg,
          });
        }
      } else {
        // console.log('新增----')
        const res = await addCategory(cateForm);
        if (res.code == 1) {
          ElMessage({
            type: "success",
            message: res.msg,
          });
        } else {
          ElMessage({
            type: "warning",
            message: res.msg,
          });
        }

        console.log(res);
      }
      // 重置表单
      resetForm();
    } else {
      // console.log('error submit!')
      return false;
    }
  });
};
const handleClose = (done) => {
  ElMessageBox.confirm("你确定要关闭吗？")
    .then(() => {
      done();
      resetForm();
    })
    .catch(() => {
      // catch error
    });
};
//获取列表数据

// 导出父组件需要用的属性与方法
defineExpose({
  editId,
  cateForm,
  fileList,
});
</script>

<template>
  <!-- 对话框 -->
  <el-dialog
    v-model="catesStore.dialogVisible"
    :title="editId ? '编辑分类' : '新增分类'"
    width="50%"
    :before-close="handleClose"
  >
    <el-form :model="cateForm" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="一级分类" prop="parent_id">
        <!-- <el-input v-model="cateForm.parent_id" placeholder="请输入分类名称" /> -->
        <el-select v-model="cateForm.parent_id" placeholder="请选择一级分类">
          <el-option
            v-for="item in cateForm.selectArr"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="cateForm.name" placeholder="请输入分类名称" />
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="cateForm.state">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="submitForm">{{
          editId ? "编辑分类" : "新增分类"
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
